<template>
  <div v-if="!item.hidden" class="sidebar_item_content">
    <template
      v-if="
        hasOneShowingChild(item.children, item) &&
          (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
          !item.alwaysShow
      "
    >
      <el-popover
        placement="right-start"
        trigger="hover"
        popper-class="custom_popper"
        v-if="customPath"
        :open-delay="openDelay"
        :close-delay="300"
        ref="popover"
      >
        <!-- <submenu :path="customPath" @pathChange="pathChange"></submenu> -->
        <div slot="reference">
          <el-menu-item
            :index="resolvePath(onlyOneChild.path)"
            :class="{ 'submenu-title-noDropdown': !isNest }"
            @click="clickPath(onlyOneChild.path)"
          >
            <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
          </el-menu-item>
        </div>
      </el-popover>
      <el-menu-item
        v-else
        :index="resolvePath(onlyOneChild.path)"
        :class="{ 'submenu-title-noDropdown': !isNest }"
        @click="clickPath(onlyOneChild.path)"
      >
        <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
      </el-menu-item>
    </template>

    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-submenu>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="460px" :append-to-body="true">
      <other-type @cancel="dialogVisible = false" :inOrOut="inOrOut"></other-type>
    </el-dialog>
    <!-- 创建账套时间 -->
    <DialogCreateCard ref="createCardDialog"></DialogCreateCard>
  </div>
</template>

<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'
import submenu from './submenu.vue'
import DialogCreateCard from '../../../views/components/dialogCreateCard'
import OtherType from '../../../views/components/dialogOtherType.vue'
import Vue from 'vue'
import { handlePermissions, handlePagePermissions } from '../../../utils'

export default {
  name: 'SidebarItem',
  components: { Item, AppLink, submenu, OtherType, DialogCreateCard },
  mixins: [FixiOSBug],
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
    // TODO: refactor with render function
    this.onlyOneChild = null
    return {
      orderList: [{}, {}, {}],
      customMenu: [
        '/sale',
        '/purchase',
        '/baseInfomation',
        '/reportStatistics',
        '/stock',
        '/payment',
        '/adjust',
        '/AuthCenter'
      ],
      visible: false,
      customPath: '',
      dialogVisible: false,
      dialogTitle: '',
      inOrOut: 1,
      openDelay: 500,
      isOpenAccount: false
    }
  },
  watch: {
    visible(val) {
      console.log(val)
      if (val == true) {
        this.openDelay = 1200
      } else {
        this.openDelay = 500
      }
    },
    '$store.getters.openAccountValue'(val) {
      if (val === 3) {
        this.isOpenAccount = true
      } else {
        this.isOpenAccount = false
      }
    }
  },
  mounted() {
    const openAccount = this.$store.getters.openAccountValue
    if (openAccount === 3) {
      this.isOpenAccount = true
    } else {
      this.isOpenAccount = false
    }
  },
  methods: {
    pathChange(data) {
      if (data == 1) {
        this.dialogVisible = true
        this.inOrOut = 1
        this.dialogTitle = '其他入库类型设置'
      } else if (data == 2) {
        this.dialogVisible = true
        this.inOrOut = 2
        this.dialogTitle = '其他出库类型设置'
      } else if (data == 3) {
        this.$refs.createCardDialog.show()
      }
      // this.visible = false
      this.$refs.popover.doClose()
    },
    popoverShow() {
      // console.log(this.visible);
    },
    hasOneShowingChild(children = [], parent) {
      if (parent.path && this.customMenu.indexOf(parent.path) > -1) {
        this.customPath = parent.path
        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
        return true
      } else {
        this.customPath = ''
      }
      const showingChildren = children.filter((item) => {
        if (item.hidden) {
          return false
        } else {
          // Temp set(will be used if only has one showing child)
          this.onlyOneChild = item
          return true
        }
      })

      // When there is only one child router, the child router is displayed by default
      if (showingChildren.length === 1) {
        return true
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
        return true
      }

      return false
    },
    resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.basePath)) {
        return this.basePath
      }
      return path.resolve(this.basePath, routePath)
    },
    clickPath (path, title) {
      let nPath = this.resolvePath(path)
      console.log('自定义点击：', nPath)
      let targetPath = ''
      if (nPath == '/sale') {
        targetPath = '/sale'
      } else if (nPath == '/purchase') {
        targetPath = '/purchase'
      } else if (nPath == '/stock') {
        targetPath = '/stock'
      } else if (nPath == '/payment') {
        targetPath = '/payment'
      } else if (nPath == '/reportStatistics') {
        targetPath = '/reportStatistics'
      } else if (nPath == '/baseInfomation') {
        targetPath = '/baseInfomation'
      } else if (nPath == '/smart/replenish') {
        if (!handlePagePermissions('智能补货分析')) {
          return this.$elMessage.warning('没有权限！')
        }
        this.$router.push(nPath)
        return
      } else {
        if ((nPath === '/setting/buy/accountBookPay' || nPath === '/dashboard/analysis') && Vue.ls.get('account-no-money')) {
          return this.$elMessage.warning('续费未完成不能操作!')
        }
        if(!this.isOpenAccount && nPath === '/dashboard/analysis'){
          return this.$elMessage.warning('未开账不能操作!')
        }
        this.$router.push(nPath)
        return
      }

      if (this.$route.path !== targetPath) {
        this.$router.push(targetPath)
      }
    }
    // clickPath (path) {
    //   let nPath = this.resolvePath(path)
    //   console.log('自定义点击：', nPath)
    //   // 账套过期不允许进入其他页面
    //   if ((nPath === '/setting/buy/accountBookPay' || nPath === '/dashboard/analysis') && Vue.ls.get('account-no-money')) {
    //     return this.$elMessage.warning('续费未完成不能操作!')
    //   }
    //   if(!this.isOpenAccount && nPath === '/dashboard/analysis'){
    //     return this.$elMessage.warning('未开账不能操作!')
    //   }

    //   if (nPath && this.customMenu.includes(nPath)) {

    //   } else {
    //     this.$router.push({
    //       path: nPath
    //     }, () => { }, () => { })
    //   }
    // },
  }
}
</script>
<style>
.sublist {
  min-width: 7.912995rem;
  min-height: 5.006563rem;
  background: #042a4d;
  opacity: 1;
  position: absolute;
  top: 0;
  left: -0.243765rem;
  display: flex;
}
.el-popper[x-placement^='right'] {
  margin-left: 0px !important;
}
.el-popper[x-placement^='right'] .popper__arrow {
  border-bottom-color: #042a4d;
  display: none;
}
.el-popper[x-placement^='right'] .popper__arrow::after {
  display: none;
}
.sidebar_item_content {
  background: #1890ff;
}
.el-popover.custom_popper {
  background: rgb(18, 36, 68);
  border: none;
  padding: 0;
  border-radius: 5px;
}
.system_set_view {
  width: 100%;
  height: 260px;
  background: rgb(18, 36, 68);
  padding: 7px 37px;
}
</style>
<style lang="less" scoped>
::v-deep .el-dialog {
  width: 100%;
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dialog__headerbtn {
      position: static;
      .el-icon-close {
        color: #999;
        font-size: 20px;
      }
    }
  }
  .header_title {
    width: 100%;
    display: flex;
    align-items: center;
    .title_span {
      white-space: nowrap;
      font-size: 0.300019rem;
      color: #666;
      font-weight: 600;
    }
  }
}
</style>
